<template>
    <div class="container">
        <h2>我的奖励</h2>

        <el-table :data="rewardList" border style="width: 100%" v-loading="loading">
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="reason" label="奖励原因" />
            <el-table-column prop="date" label="日期" width="120" />
            <el-table-column prop="level" label="奖励等级" width="120" />
        </el-table>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
import api from '../api/request'

const store = useStore()
const rewardList = ref([])
const loading = ref(false)

onMounted(() => {
    fetchMyRewards()
})

// 获取我的奖励记录
const fetchMyRewards = async () => {
    loading.value = true
    try {
        // 获取当前学生的学号
        const studentId = store.state.userInfo.id

        // 调用 API 获取该学生的奖励记录
        const res = await api.reward.getByStudentId(studentId)
        if (res.code === 1) {
            rewardList.value = res.data
        } else {
            ElMessage.error(res.msg || '获取奖励记录失败')
        }
    } catch (error) {
        console.error('获取奖励记录出错:', error)
        ElMessage.error('获取奖励记录失败')
    } finally {
        loading.value = false
    }
}
</script>

<style scoped>
.container {
    padding: 20px;
}
</style>